import React from 'react';
import PropTypes from 'prop-types'
import { Router, Route } from 'react-router';
import 'normalize.css';
import './App.css';
import './polyfill';
// 非直接输入路由
import NotDirectInputRoute from './NotDirectInputRoute'
// 非直接报告路线
import NotDirectReportRoute from './NotDirectReportRoute'
// 欢迎页
import WelcomeContainer from './containers/WelcomeContainer';
// 报告容器
import ReportContainer from './containers/ReportContainer';
// 身体数据输入容器
import BodyDataInputContainer from './containers/BodyDataInputContainer';
// 彩色结肠直肠癌报告
import ReportColorectalcancer from './containers/ReportColorectalcancer'
// 胃癌报告
import ReportGastriccancer from './containers/ReportGastriccancer'
// 五项健康习惯
import ReportFivehealthhabit from './containers/ReportFivehealthhabit'
// 错误输入容器
import badInputContainer from './containers/BadInputContainer'
// 心肌梗死报告
import ReportCardiacInfarction from './containers/ReportCardiacInfarction'
// 脑中风报告
import ReportCerebralstroke from './containers/ReportCerebralstroke'


const Message1 = ({ match }) => {
  return (
    <div>
      Message1
    </div>
  );
}
const Message2 = ({ match }) => {
  return (
    <div>
      Message2
    </div>
  );
}


const InnerComponent = ({ match }) => {

  console.log(match)
  return (
    <div>
      <h2>Topics</h2>

      <Route path={`/other/1`} component={Message1}/>
      <Route path={`/other/2`} component={Message2}/>

    </div>
  );
}


const App = ({ history }) => {
  return (
    <div className="App">
      <Router history={history}>
        <div>
          <Route exact={true} path="/" component={WelcomeContainer} />
          <Route path="/report" component={ReportContainer} />

          <Route exact={true} path="/other" component={InnerComponent} />
          <Route path="/other/:id" component={InnerComponent} />

          <Route path="/report_colorectalcancer" component={ReportColorectalcancer} />
          <Route path="/report_gastriccancer" component={ReportGastriccancer} />
          <Route path="/report_fivehealthhabit" component={ReportFivehealthhabit} />
          <Route path="/report_cerebralstroke" component={ReportCardiacInfarction} />
          <Route path="/report_cardiacinfarction" component={ReportCerebralstroke} />
          <Route path="/input" component={BodyDataInputContainer} />
          {/*<Route component={NotDirectInputRoute}>
          </Route>
          <Route component={NotDirectReportRoute}>
          </Route>*/}
          {
            /* build後には、アクセスさせない */
            /*global process*/
            process.env.NODE_ENV !== 'production' &&
            <Route path="/bad" component={badInputContainer} />
          }
          {/*<Route path="*" component={WelcomeContainer} />*/}
        </div>
      </Router>
    </div>
  )
}
App.propTypes = {
  history: PropTypes.object.isRequired,  // eslint-disable-line react/forbid-prop-types
};

export default App;
